<template>
    <div>
        <el-card>
            <div style="display: flex;flex-direction: column;justify-content: space-around;align-items: center;margin-bottom: 50px">
                <div>
                    <el-radio-group v-model="messageSort" @change="initData">
                        <el-radio-button label="我推送的"></el-radio-button>
                        <el-radio-button label="我收到的"></el-radio-button>
                    </el-radio-group>
                </div>
                <div style="margin-top: 25px;width: 100%;display: flex;flex-direction: row;justify-content: space-around">
                    <div>
                        <label style="font-size: 16px;font-weight: 600">消息状态:</label>
                        <el-select style="width: 150px;margin-left: 5px" value="searchDTO.status" v-model="searchDTO.status" @change="initData" clearable>
                            <el-option value="1" label="已读"></el-option>
                            <el-option value="0" label="未读"></el-option>
                        </el-select>
                    </div>
                    <div>
                        <label style="font-size: 16px;font-weight: 600">消息类型:</label>
                        <el-select style="width: 150px;margin-left: 5px" :value="searchDTO.type" v-model="searchDTO.type" @change="initData" clearable>
                            <el-option value="info"></el-option>
                            <el-option value="success"></el-option>
                            <el-option value="warning"></el-option>
                            <el-option value="error"></el-option>
                        </el-select>
                    </div>
                    <el-input style="width: 300px;margin-right: 15px" prefix-icon="el-icon-search" placeholder="根据消息内容查询" v-model="searchDTO.content">
                        <el-button slot="append" icon="el-icon-search" @click="initData"></el-button>
                    </el-input>
                    <el-button type="success" @click="sendInfo">推送消息</el-button>
                    <el-button type="primary" @click="markToRead">标记为已读</el-button>
                    <el-button type="info" @click="markToUnRead">标记为未读</el-button>
                    <el-button type="danger" @click="deleteInfos">批量删除</el-button>
                </div>
            </div>
            <el-table
                    ref="multipleTable"
                    :header-cell-style="tableHeader"
                    @selection-change="handleSelectionChange"
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        label="消息状态">
                    <template slot-scope="scope">
                        <span :style="{color:(scope.row.status==0?'#FF0000':'#000')}" v-text="scope.row.status==0?'未读':'已读'" style="font-size: 20px;font-weight: 600"></span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="创建日期"
                        width="180">
                    <template slot-scope="scope">
                        <span>{{scope.row.createDatetime | dataFormat}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="修改日期"
                        width="180">
                    <template slot-scope="scope">
                        <span>{{scope.row.updateDatetime | dataFormat}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        min-width="200"
                        prop="title"
                        label="消息标题">
                </el-table-column>
                <el-table-column
                        min-width="200"
                        prop="content"
                        label="消息内容">
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="消息类型">
                </el-table-column>
                <el-table-column
                        label="发送人"
                        width="180">
                    <template slot-scope="scope">
                        {{scope.row.sendUserId | UserNameFilter}}
                    </template>
                </el-table-column>
                <el-table-column
                        label="接收人"
                        width="180">
                    <template slot-scope="scope">
                        {{scope.row.userId | UserNameFilter}}
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        align="center"
                        width="200">
                    <template slot-scope="scope">
                        <el-button icon="el-icon-search" size="small" @click="showInfo(scope.row)"></el-button>
                        <el-button icon="el-icon-delete" size="small" @click="deleteInfo(scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="searchDTO.page"
                    :page-sizes="[10, 15, 20, 30]"
                    :page-size="searchDTO.rows"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="searchDTO.total">
            </el-pagination>
        </el-card>
        <el-dialog
            :title=dialogTitle
            :visible.sync="dialogVisible"
            width="40%"
            :before-close="handleClose">
            <el-form label-width="10%" ref="messageDTO" :model="messageDTO">
                <el-form-item label="消息标题">
                    <el-input :disabled="isShow" v-model="messageDTO.title"></el-input>
                </el-form-item>
                <el-form-item label="消息内容">
                    <el-input :disabled="isShow" type="textarea" rows="3" v-model="messageDTO.content"></el-input>
                </el-form-item>
                <el-form-item label="消息类型">
                        <el-radio :disabled="isShow" v-model="messageDTO.type" :value="messageDTO.type" label="info">普通</el-radio>
                        <el-radio :disabled="isShow" v-model="messageDTO.type" :value="messageDTO.type" label="warning">警告</el-radio>
                        <el-radio :disabled="isShow" v-model="messageDTO.type" :value="messageDTO.type" label="success">重要</el-radio>
                        <el-radio :disabled="isShow" v-model="messageDTO.type" :value="messageDTO.type" label="error">紧急</el-radio>
                </el-form-item>
                <el-form-item  v-if="!isShow" label="接收人">
                    <el-switch  v-model="onlineUser"
                                @change="changeOnline"
                               active-text="在线用户"
                               inactive-text="所有用户" active-value=true inactive-value=false></el-switch>
                    <el-transfer
                            :titles=titles
                            :format="{
                                noChecked: '${total}',
                                hasChecked: '${checked}/${total}'
                              }"
                            v-model="hasChecked"
                            :data="allChoose">
                    </el-transfer>
                </el-form-item>
                <template v-if="!isShow">
                    <el-form-item align="center">
                        <el-button type="success" @click="sendMessage(messageDTO)">开始推送</el-button>
                        <el-button type="info" @click="handleClose">取消推送</el-button>
                    </el-form-item>
                </template>
            </el-form>


        </el-dialog>
    </div>
</template>

<script>
    import moment from 'moment'
    import Message from '../../components/messages/index'
    import Filter from '../../utils/filter.js'
    const user = JSON.parse(localStorage.getItem("user"));
    export default {
        name: "Info",
        data(){
            return {
                tableHeader:{
                    "background-color":"#7fa1be99",
                    "color":"white",
                    "font-size":"18px"
                },
                selectionItems:[],
                messageSort:"我收到的",
                searchDTO:{
                    page:1,
                    rows:10,
                    userId:"",
                    sendUserId:"",
                    content:"",
                    type:"",
                    status:"",
                    total:0
                },
                messageDTO:{
                    title:"",
                    content:"",
                    type:"",
                    sendUserId:"",
                    status:"",
                    receiveUserIds:[]
                },
                tableData: [],
                dialogVisible:false,
                dialogTitle:"推送消息",
                titles:['用户列表','已选用户'],
                onlineUser:false,
                userList: [],
                allChoose: [],
                hasChecked:[],
                isShow:false,
                user: JSON.parse(localStorage.getItem("user")),
                allUser:[]

            }
        },
        methods:{
          //初始化数据
            initData(){
            let self = this;
            if (self.messageSort==="我收到的") {
              self.searchDTO.userId = user.id;
              self.searchDTO.sendUserId = null;
              self.$http.post("/information/getInfoPage",self.searchDTO).then(res=>{
                if (res.status === 200){
                  self.tableData = res.data.list;
                  self.searchDTO.total = res.data.total;
                }
              })
            }else {
              self.searchDTO.userId = null;
              self.searchDTO.sendUserId = user.id;
              self.$http.post("/information/getInfoPage",self.searchDTO).then(res=>{
                if (res.status === 200){
                  self.tableData = res.data.list;
                  self.searchDTO.total = res.data.total;
                }
              })
            }

          },
            handleSelectionChange(val){
                this.selectionItems = [];
                val.forEach(v =>{
                    this.selectionItems.push(v.id);
                });
            },
            handleSizeChange(value){
                let self = this;
                this.searchDTO.rows = value;
                self.initData();
            },
            handleCurrentChange(value){
                this.searchDTO.page = value;
                this.initData();
            },
            //批量标记未已读
            markToRead(){
                if (this.selectionItems.length<1){
                    this.$message.warning("至少需要选择一条数据")
                }else{
                    this.$http.post("/information/setInfoRead",{
                        type:1,
                        ids:this.selectionItems
                    }).then(res=>{
                        if (res.status===200) {
                            Message.success("操作成功");
                            this.initData();
                        }
                    })
                }
            },
            //批量标记为未读
            markToUnRead(){
                if (this.selectionItems.length<1){
                    this.$message.warning("至少需要选择一条数据")
                }else{

                    this.$http.post("/information/setInfoRead",{
                        type:0,
                        ids:this.selectionItems
                    }).then(res=>{
                        if (res.status===200) {
                            Message.success("操作成功");
                            this.initData();
                        }
                    })
                }
            },
            //批量删除
            deleteInfos(){
                if (this.selectionItems.length<1){
                    this.$message.warning("至少需要选择一条数据")
                }else{
                    Message.confirm("是否需要删除这些通知？").then(()=>{
                        this.$http.post("/information/deleteByIds",this.selectionItems).then(res=>{
                            if (res.status===200) {
                                Message.success("删除成功");
                                this.initData();
                            }
                        })
                    })
                }
            },
            //推送消息框
            sendInfo(){
                this.dialogTitle = "推送消息";
                this.dialogVisible = true;
                this.messageDTO = {};
                this.getAllUser();
                this.isShow = false;
            },
            //单条查看
            showInfo(data){
                this.dialogTitle = "查看消息";
                this.dialogVisible = true;
                this.$http.get("/information/get/"+data.id).then(res => {
                   if (res.status === 200){
                     this.messageDTO = res.data;
                     this.isShow = true;
                   }
                })

            },
            deleteInfo(data){
                Message.confirm("是否需要删除此通知？").then(()=>{
                    let ids = [];
                    ids.push(data.id);
                    this.$http.post("/information/deleteByIds",ids).then(res=>{
                        if (res.status===200) {
                            Message.success("删除成功");
                            this.initData();
                        }
                    })
                })
            },
            handleClose(){
                this.dialogVisible = false;
                this.initData();
            },
            changeOnline(val){
               this.getAllUser();
               if (val==='true'){
                   this.titles = ['在线列表','已选用户']
               } else{
                   this.titles = ['所有用户','已选用户']
               }
            },
            getAllUser(){
                let self = this;
                self.allChoose = [];
                self.hasChecked = [];
                if (self.onlineUser==='true'){
                    self.$http.get("/websocket/getOnlineUserList").then(res=>{
                        if (res.status===200){
                            res.data.forEach(user =>{
                                self.allChoose.push({
                                    label: user.userName,
                                    key: user.id,
                                })
                            })
                        }
                    })
                }else {
                    self.$http.get("/user/all").then(res=>{
                        if (res.status===200){
                            res.data.forEach(user =>{
                                self.allChoose.push({
                                    label: user.userName,
                                    key: user.id,
                                })
                            })
                        }
                    });
                }
            },
            //推送消息
            sendMessage(data){
                let self = this;
                let userIds = [];
                self.hasChecked.forEach(v=>{
                     userIds.push(v)
                });
                data.receiveUserIds = userIds;
                data.sendUserId = this.user.id;
                console.log(data);
                self.$http.post("/information/sendMessage",data).then(res=>{
                    if (res.status===200){
                        Message.success(res.data);
                        self.dialogVisible = false;
                        self.initData();
                    }
                });

            }
        },
        mounted(){
            this.initData();
        },
        filters:{
            dataFormat:(data)=>{
                return moment(data).format("YYYY/MM/DD HH:mm:ss")
            },
            UserNameFilter:function (data) {
                return Filter.UserNameFilter(data)
            }
        },
    }
</script>

<style scoped>
    ::-webkit-scrollbar
    {
        width: 5px;
        height: 5px;
        background-color: #F5F5F5;
    }
    /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-track
    {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color: #F5F5F5;
    }
    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb
    {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #bdbdbd;
    }
    /*滑块效果*/
    ::-webkit-scrollbar-thumb:hover
    {
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: rgba(0,0,0,0.4);
    }
    /*IE滚动条颜色*/
    html {
        scrollbar-face-color:#bfbfbf;/*滚动条颜色*/
        scrollbar-highlight-color:#000;
        scrollbar-3dlight-color:#000;
        scrollbar-darkshadow-color:#000;
        scrollbar-Shadow-color:#adadad;/*滑块边色*/
        scrollbar-arrow-color:rgba(0,0,0,0.4);/*箭头颜色*/
        scrollbar-track-color:#eeeeee;/*背景颜色*/
    }
</style>